import {Button, Collapse, Form, Input, Row, Col, Tree} from 'antd'
import React, {useEffect, useState} from 'react'
import {history} from 'umi'

import {translateDataToTree} from '@/utils/common/index'
import {getMenuList} from '@/service/system/menu'
import {viewRole} from '@/service/system/role'
import styles from '@/assets/common/css/page.less'

const {TextArea} = Input
const {Panel} = Collapse

const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)
const view = (props: any) => {
	const [form] = Form.useForm()
	const [menuSource, setMenuSource] = useState<any[]>([])
	const [viewData, setViewData] = useState<any>()
	const [selectId, setSelectedId] = useState<any[]>([])

	// 获取菜单数据
	const onListFun = () => {
		getMenuList().then((res: any) => {
			if (res.data.length) {
				const list = translateDataToTree(res.data)
				setMenuSource(list as any)
			}
		})
	}
	const getObjectById = (dataSource: any, temp: any[] = []) => {
		const forFn = (arr: any) => {
			for (let i = 0; i < arr?.length; i += 1) {
				if (!arr[i]?.children || arr[i]?.children?.length === 0) {
					temp.push(arr[i])
				} else {
					forFn(arr[i]?.children)
				}
			}
		}
		forFn(dataSource)
		return temp
	}
	useEffect(() => {
		if (viewData) {
			const l = getObjectById(menuSource, [])
			const ml = l?.map((n: any) => n.id)
			const ids = viewData?.permissionList?.map((x: any) => x?.id)
			const idls = ids?.filter((item: any) => ml?.includes(item))
			setSelectedId(() => idls)
		}
	}, [menuSource, viewData])
	// 获取角色详情
	const viewRoleFun = (id: string) => {
		viewRole(id).then((res: any) => {
			if (res.success) {
				form.setFieldsValue({...res.data})
				setViewData(() => res.data)
			}
		})
	}
	useEffect(() => {
		const {id} = props.location.query
		onListFun()
		if (id) {
			viewRoleFun(id)
		}
	}, [])

	const onCheck = (checkedKeys: any) => {
		setSelectedId([...checkedKeys])
	}

	return (
		<div className={styles.page}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Collapse
					defaultActiveKey={['1', '2']}
					ghost
					expandIconPosition="end">
					<Panel header={customizeHeader('基础信息')} key="1">
						<Form
							form={form}
							name="basic"
							layout="horizontal"
							labelCol={{flex: '80px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							autoComplete="off">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="编码"
										name="code"
										rules={[
											{
												required: true,
												message: '请输入编号',
											},
										]}>
										<Input
											placeholder="请输入编号"
											disabled
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="名称"
										name="name"
										rules={[
											{
												required: true,
												message: '请输入名称',
											},
										]}>
										<Input
											placeholder="请输入名称"
											disabled
										/>
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="描述" name="description">
										<TextArea
											disabled
											placeholder="请输入( 最多100字 )"
											maxLength={100}
											autoSize={{minRows: 3, maxRows: 6}}
										/>
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</Panel>
					<Panel header={customizeHeader('功能授权')} key="2">
						<div className="border">
							<Tree
								disabled
								checkable
								checkedKeys={selectId}
								onCheck={onCheck}
								treeData={menuSource}
								fieldNames={{
									title: 'name',
									key: 'id',
								}}
							/>
						</div>
					</Panel>
				</Collapse>
				<div className={styles.wrap}>
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
				</div>
			</div>
		</div>
	)
}

export default view
